<template>
    <div class="tnb">
    <div class="topNav">
        <header>
            <nav class="nav-bar">
                <!-- <div class="seize"></div> -->
                <a href="#" class="nav-branding"><img src="@/assets/logo.png" alt=""></a>
                <div class="nav-down">
                    <!-- <div class="search"> -->
                        <input id="search" type="text" placeholder="    搜索站内资源" />
                    <!-- </div> -->
                    <ul class="nav-menu">
                        <li class="nav-item"><a href="#" class="nav-link">资源</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">作者</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">社区</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">联系我</a></li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <router-link :to="path='/login'">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-vihanblogtouxiang"></use>
                                    </svg>
                                </router-link>
                            </a>
                        </li>
                    
                    </ul>
                
                    <div class="hamburger">
                        <span class="bar"></span>
                        <span class="bar"></span>
                        <span class="bar"></span>
                    </div>
                </div>
            </nav>
        </header>
    </div>

    <slot/>

        <div class="bottommer">
            <p>OpenSource IMT Licence | CopyRight</p>
            <p>Design By VihanWoo</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'Topper',
    mounted() {
        let s=document.createElement('script')
        s.type='text/javascript'
        s.src=`/js/main.js`
        document.querySelector('.topNav').appendChild(s)
    },

}
</script>
<style scoped>
    .nav-down li{
        width: 100%;
        height: auto;
        text-align: center;
    }
    .nav-down a{
        z-index: 99;
        width: 100%;
        height: auto;
    }
    .bottommer{
        width: 100%;
        text-align: center;
        background-color: #f8f5f6;
        height: 110px;
        padding: 30px;
        color: rgb(131, 131, 131);
    }
    .bottommer p{
        margin: 6px;
        font-size: 14px;
    }
</style>